<template>
    <div class="app-tools-container">
        <div class="user-part">
            <div class="fli-portrait">
                <el-avatar :size="50" :src="$store.state.options.user.portrait" />
            </div>
            <div class="fli-average">{{ $store.state.options.user.nickname }}</div>
        </div>
        <ul class="user-prv-botton el-mt-10">
            <li>
                <el-tooltip class="item" effect="dark" content="注销" placement="right">
                    <el-button @click="eventClickLoginOut" icon="el-icon-guide" circle></el-button>
                </el-tooltip>
            </li>
        </ul>
        <el-tabs
            @tab-click="eventClickTabOperate" @tab-remove="eventRemoveTabOperate"
            v-model="activePath" tab-position="right" closable class="el-mt-20"
        >
            <el-tab-pane
                v-for="(item, index) in $store.state.tabs.items"
                :key="index" :label="item.title" :name="item.path"
            />
        </el-tabs>
    </div>
</template>

<style lang="scss">
    .app-tools-container {
        position: absolute;
        width: 180px;
        top: 1rem;
        right: -16rem;
        height: 98vh;
        text-align: left;
        overflow: hidden;

        .user-part {
            display: flex;
            align-items: center;

            .fli-average {
                flex: 1;
            }
            .fli-portrait {
                flex: 0 0 60px;
            }
        }

        .user-prv-botton {
            margin: 0rem;
            padding: 0rem;
            padding-left: 0.3rem;
            list-style-type: none;

            li {
                margin: 0rem;
                padding: 0rem;
                margin-bottom: 0.8rem;
            }
        }

        .el-tabs--right .el-tabs__header.is-right {
            float: left !important;
        }
    }
</style>

<script>
    import { Avatar, Button, Tooltip, Tabs, TabPane, Message } from "element-ui";

    export default {
        name: "FloatTools",
        components: {
            [Avatar.name]: Avatar, [Button.name]: Button, [Tooltip.name]: Tooltip,
            [Tabs.name]: Tabs, [TabPane.name]: TabPane
        },
        computed: {
            tabItems () {
                return this.$store.state.tabs.items;
            },
            activePath: {
                get () {
                    return this.$store.state.tabs.active;
                },
                set (val) {
                    this.$store.commit("tabs/setActivePath", val);
                }
            }
        },
        methods: {
            eventClickTabOperate() {
                if(this.$route.path == this.activePath) return;

                this.$router.push({
                    path: this.activePath
                });
            },
            eventRemoveTabOperate(tabName) {
                // 首页不可删除
                if(tabName == "/") return;

                this.$store.commit("tabs/deleteTabs", tabName);

                if (this.activePath === tabName) {
                    if (this.tabItems && this.tabItems.length >= 1) {
                        let index = this.tabItems.length - 1;

                        this.$store.commit("tabs/setActivePath", this.tabItems[index].path);
                        this.$router.push({
                            path: this.tabItems[index].path
                        });
                    } else {
                        this.$router.push({
                            path: "/"
                        });
                    }
                }
            },
            eventClickLoginOut() {
                this.axios.post(this.$store.state.options.interface.user.loginOut, {}).then(
                    (res) => {
                        window.sessionStorage.clear();
                        window.location.reload();
                    },
                    (frs) => {
                        console.log(frs);
                        Message.warning(frs.message);
                    }
                );
            },
            eventClickEditPassword() {
                this.$router.push({
                    path: "/index/edit-password"
                });
            }
        },
        watch: {
            "$route"(to) {
                // console.log(to);
                var state = true;

                for (let item of this.tabItems) {
                    if (item.path === to.path) {
                        state = false;
                        this.$store.commit("tabs/setActivePath", to.path);
                        break
                    }
                }

                if (state) {
                    this.$store.commit("tabs/addTabs", {
                        title: this.$route.meta.menu.name,
                        path: to.path
                    });

                    this.$store.commit("tabs/setActivePath", to.path);
                }
            }
        }
    };
</script>
